<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WuKong 商城-购物车</title>
    <link rel="stylesheet" th:href="@{shop/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{shop/css/common.css}">
    <link rel="stylesheet" th:href="@{shop/styles/header.css}">
    <link rel="stylesheet" th:href="@{shop/styles/cart.css}">
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert2/sweetalert2.min.css}"/>
</head>
<body>

<div id="cart">
    <div class="banner_x center">
        <a th:href="@{/index}" target="_blank">
            <div class="logo fl">
                <img src="shop/image/wukong_shop_log.png"/>
            </div>
        </a>

        <div class="wdgwc fl ml20">购物车</div>
        <div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
        <div class="clear"></div>
    </div>
    <div class="cart_line"></div>
    <div class="cart_bg">
        <th:block th:if="${#lists.isEmpty(cartItemVOListPage)}">
            <div class="list center">
                <img style="position: absolute;margin-top: 16px;left: 45%;" th:src="@{/shop/image/null-content.png}">
            </div>
        </th:block>
        <!--        后端数据不为空-->
        <th:block th:unless="${#lists.isEmpty(cartItemVOListPage)}">
            <div class="list center">
                <div class="top2 center">
                    <div class="sub_top fl">
                    </div>
                    <div class="sub_top fl">商品名称</div>
                    <div class="sub_top fl">单价</div>
                    <div class="sub_top fl">数量</div>
                    <div class="sub_top fl">小计</div>
                    <div class="sub_top fr">操作</div>
                    <div class="clear"></div>
                </div>
                <th:block th:each="item : ${cartItemVOListPage}">
                    <div class="content2 center">
                        <div class="sub_content fl ">
                        </div>
                        <div class="sub_content cover fl"><img th:src="@{${item.goodsCoverImg}}"></div>
                        <!--                        商品名称-->
                        <div class="sub_content fl ft20" th:text="${item.goodsName}">商品名称</div>
                        <!--                        单价-->
                        <div class="sub_content fl" th:text="${item.sellingPrice+'元'}">1299元</div>
                        <!--                       数量 -->
                        <div class="sub_content fl">
                            <input class="goods_count" th:id="${'goodsCount'+item.cartItemId}" type="number"
                                   th:onblur="'updateItem('+${item.cartItemId}+')'"
                                   th:value="${item.goodsCount}" step="1" min="1"
                                   max="5">
                        </div>
                        <!--                       小计-->
                        <div class="sub_content fl" th:text="${item.goodsCount*item.sellingPrice+'元'}">1299元</div>
                        <!--                        删除操作-->
                        <div class="sub_content fl"><a href="##" th:onclick="'deleteItem('+${item.cartItemId}+')'">×</a>
                        </div>
                        <div class="clear"></div>
                    </div>
                </th:block>
            </div>
        </th:block>

        <div class="pre_order mt20 center">
            <div class="tips fl ml20">
                <ul>
                    <li><a th:href="@{/index}">继续购物</a></li>
                    <li>|</li>
                    <li>共<span th:text="${goodsTotalCount}">13</span>件商品</li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="order_div fr">
                <div class="order_total fl">合计（不含运费）：<span th:text="${goodsTotalPrice}+'.00元'">1299.00元</span></div>
                <div class="order_button fr">
                    <th:block th:if="${goodsTotalPrice == 0}">
                        <input class="order_button_c" type="button" name="tip"
                               onclick="tip()"
                               value="去结算"/>
                    </th:block>
                    <th:block th:unless="${goodsTotalPrice == 0}">
                        <input class="order_button_d" type="button" name="settle"
                               onclick="settle()"
                               value="去结算"/>
                    </th:block>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div th:replace="shop/common/footer::footer-fragment"></div>

</body>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/admin/plugins/sweetalert2/sweetalert2.all.min.js}"></script>
<script type="text/javascript">

    /**
     * 购物车中数量为0时提示
     */
    function tip() {
        Swal.fire({
            text: "购物车中无数据，无法结算",
            icon: "error", iconColor: "#f05b72",
        });
    }

    /**
     * 跳转至结算页面(订单核实页面)
     */
    function settle() {
        window.location.href = '/shop-cart/order-settle'
    }

    /**
     *更新购物项
     */
    function updateItem(id) {
        var domId = 'goodsCount' + id;
        var goodsCount = $("#" + domId).val();
        if (goodsCount > 5) {
            Swal.fire({
                text: "单个商品最多可购买5个",
                icon: "error", iconColor: "#f05b72",
            });
            return;
        }
        if (goodsCount < 1) {
            Swal.fire({
                text: "数量异常",
                icon: "error", iconColor: "#f05b72",
            });
            return;
        }
        var data = {
            "cartItemId": id,
            "goodsCount": goodsCount
        };
        $.ajax({
            type: 'PUT',
            url: '/shop-cart',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.code == 20000) {
                    window.location.reload();
                } else {
                    Swal.fire({
                        text: "操作失败",
                        icon: "error", iconColor: "#f05b72",
                    });
                }
            },
            error: function () {
                Swal.fire({
                    text: "操作失败",
                    icon: "error", iconColor: "#f05b72",
                });
            }
        });
    }

    /**
     * * 删除购物项
     * @param id
     */
    function deleteItem(id) {
        Swal.fire({
            title: "确认弹框",
            text: "确认要删除数据吗?",
            icon: "warning", iconColor: "#dea32c",
            showCancelButton: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消'
        }).then((flag) => {
                if (flag.value) {
                    $.ajax({
                        type: 'DELETE',
                        url: '/shop-cart/' + id,
                        success: function (response) {
                            if (response.code == 20000) {
                                window.location.reload();
                            } else {
                                Swal.fire({
                                    text: "操作失败",
                                    icon: "error", iconColor: "#f05b72",
                                });
                            }
                        },
                        error: function () {
                            Swal.fire({
                                text: "操作失败",
                                icon: "error", iconColor: "#f05b72",
                            });
                        }
                    });
                }
            }
        )
        ;
    }
</script>
</html>
